<script setup>
import {reactive,ref} from "vue";
import {useRouter} from "vue-router"
import request from '@/api/request'
import { Search } from '@element-plus/icons-vue'
let router = useRouter();
const rules = reactive({

})

let AcceptanceOnArrival=ref({})
let formRef=ref()
let purchaseOrder=ref([])
let warehouse=ref([])
let acceptanceOnArrival=ref([])
let AcceptanceOnArrivals=ref([])
let User=ref([])

let isVisible = ref(false)
let title = ref("")
let data = ref({})


let page=ref({
    current:1,
    size:10000,
    total:0,
    records:[]
})

let toRemove=()=>{
    request({
        //查询客户
        url:"/acceptanceOnArrival",
        method:"delete",
        data:acceptanceOnArrival.value
    }).then(res=>{
        location();
    })
}
//修改
let toUpdate=(id)=>{
    title.value="修改"
    isVisible.value=true;
    data.value=id;
    
    router.push("/procurement/AcceptanceOnArrival/update");
}

let refTanle=()=>{
    isVisible.value=false;
    location();
}
//重置
let shuaxin=()=>{
    formRef.value.resetFields();
}
//新增
let toInsert=()=>{
    title.value="验收入库申请";
    isVisible.value=true;
    router.push("/procurement/AcceptanceOnArrival/insert");
}

//选择框事件
let fuxuankuang=(a)=>{
    acceptanceOnArrival.value= a
}

let location=()=>{
    request({
        //查询员工
            url:"/system/user/list",
            method:"post",
            data:{
                current:1,
                size:1000
            }
        }).then(res=>{
            User.value=res.data.records
        })

    request({
        //查询验收单
        url:"/acceptanceOnArrival",
        method:"get",
        params:{
            current:page.value.current,
            size:page.value.size,
            ...AcceptanceOnArrival.value
    }
    }).then(res=>{
        page.value=res.data
    })
    request({
        //查询仓库
        url:"/warehouse",
        method:"get",
        params:{
            current:1,
            size:1000
    }
    }).then(res=>{
        warehouse.value=res.data.date
    })

    request({
        //查询采购订单
        url:"/purchaseOrder",
        method:"get"
        
    }).then(res=>{
        purchaseOrder.value=res.data.records
    })

    request({
        //查询验收单
        url:"/acceptanceOnArrival",
        method:"get",
        params:{
            current:page.value.current,
            size:page.value.size
    }
    }).then(res=>{
        AcceptanceOnArrivals.value=res.data.records
    })
}

location();
</script>

<template>
    <div>
        <el-card>
            <template #header>
                <el-form ref="formRef" inline :model="AcceptanceOnArrival" style="display: flex;justify-content: start;" class="card_wrap">
                    <el-form-item label="验收单号" prop="acceptanceOnArrivalId" class="c_item">
                        <el-input v-model="AcceptanceOnArrival.acceptanceOnArrivalId" class="sousuo" placeholder="请输入单号"></el-input>
                    </el-form-item>
                    <el-form-item label="采购单" prop="acceptanceOnArrivalPurchaseOrderId" class="c_item">
                        <el-select class="sousuo"v-model="AcceptanceOnArrival.acceptanceOnArrivalPurchaseOrderId" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in purchaseOrder" :label="item.purchaseOrderName" :value="item.purchaseOrderId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入库仓库" prop="acceptanceOnArrivalWarehouseId" class="c_item">
                        <el-select class="sousuo"v-model="AcceptanceOnArrival.acceptanceOnArrivalWarehouseId" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in warehouse" :label="item.warehouseName" :value="item.warehouseId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入库批次" prop="acceptanceOnArrivalInboundBatches" class="c_item">
                        <el-select class="sousuo"v-model="AcceptanceOnArrival.acceptanceOnArrivalInboundBatches" @change="location">
                        <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in AcceptanceOnArrivals" :label="item.acceptanceOnArrivalInboundBatches" :value="item.acceptanceOnArrivalInboundBatches">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="质检员" prop="acceptanceOnArrivalEmployeeId" class="c_item">
                        <el-select class="sousuo"v-model="AcceptanceOnArrival.acceptanceOnArrivalEmployeeId" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in User" :label="item.nickname" :value="item.id">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否有不合格产品" prop="acceptanceOnArrivalEligibility" class="c_item">
                        <el-select class="sousuo"v-model="AcceptanceOnArrival.acceptanceOnArrivalEligibility" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option label="是" value="是">
                                </el-option>
                                <el-option label="否" value="否">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否入库" prop="acceptanceOnArrivalStorage" class="c_item">
                        <el-select class="sousuo"v-model="AcceptanceOnArrival.acceptanceOnArrivalStorage" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option label="是" value="是">
                                </el-option>
                                <el-option label="否" value="否">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入库时间：" prop="acceptanceOnArrivalInboundTime" class="c_item">
                            <el-date-picker v-model="AcceptanceOnArrival.acceptanceOnArrivalInboundTime" value-format="YYYY-MM-DD" type="date" placeholder="选择日期时间" @change="location">
                            </el-date-picker>
                    </el-form-item>
                    <el-form-item label="入库员" prop="acceptanceOnArrivalWarehousingClerk" class="c_item">
                        <el-select class="sousuo"v-model="AcceptanceOnArrival.acceptanceOnArrivalWarehousingClerk" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in User" :label="item.nickname" :value="item.id">
                                </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item  class="c_item">
                        <template #default>
                             <el-button type="primary" @click="location">搜索</el-button>
                            <el-button type="info" :plain=true @click="shuaxin">重置</el-button><p></p>
                        </template>
                    </el-form-item>
                </el-form>

                <div style="margin: 20px 0px;">
                    <el-button @click="toInsert" type="primary" :plain="true">+添加</el-button>
                    <el-button type="danger" :plain=true @click="toRemove" style="border:0px" :disabled="!acceptanceOnArrival.length">删除</el-button>
                </div>

                <el-table :data="page.records" :header-cell-style="{ textAlign: 'center' }"  @selection-change="fuxuankuang" :cell-style="{ textAlign: 'center' }" show-overflow-tooltip>
                    <el-table-column type="selection" width="55"/>
                    <el-table-column type="expand">
                        <template  #default="props">
                            <div m="4" style="margin: 0 120px;padding: 10px 0;" v-if="props.row.inboundDetailsList">
                                <el-table :data="props.row.inboundDetailsList" :border="false" style="border:0px" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
                                    <el-table-column prop="inboundDetailsId" label="入库详情编码"/>
                                    <el-table-column prop="inboundDetailsArrivalId" label="验收编码"/>
                                    <el-table-column prop="inboundDetailsPurchaseDetailsId" label="采购详情编码"/>
                                    <el-table-column prop="inboundDetailsQuantityOfArrival" label="到货数量"/>
                                    <el-table-column prop="inboundDetailsUnqualified" label="不合格数量"/>
                                    <el-table-column prop="inboundDetailsInboundQuantity" label="入库数量"/>
                                </el-table>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="acceptanceOnArrivalId" label="到货验收编码" width="110px;"/>
                    <el-table-column prop="acceptanceOnArrivalPurchaseOrderId" label="采购订单编码" width="120px;"/>
                    <el-table-column prop="warehouse.warehouseName" label="仓库" width="110px;"/>
                    <el-table-column prop="acceptanceOnArrivalInboundBatches" label="入库批次编码" width="110px;"/>
                    <el-table-column prop="acceptanceOnArrivalTotalQuantity" label="入库总数量" width="100px;"/>
                    <el-table-column prop="acceptanceOnArrivalInboundAmount" label="入库总金额" width="110px;"/>
                    <el-table-column prop="acceptanceOnArrivalEligibility" label="是否有不合格产品" width="140px;" #default="scope">
                        <el-tag :type="scope.row.acceptanceOnArrivalEligibility=='否' ? 'primary':'danger'">{{ scope.row.acceptanceOnArrivalEligibility}}</el-tag>
                    </el-table-column>
                    <el-table-column prop="acceptanceOnArrivalQualityInspectionTime" label="质检时间" width="100px;"/>
                    <el-table-column prop="nickname" label="员工编码" width="100px;"/>
                    <el-table-column prop="acceptanceOnArrivalStorage" label="合格品是否入库" width="130px;" #default="scope">
                        <el-tag :type="scope.row.acceptanceOnArrivalStorage=='是' ? 'primary':'danger'">{{ scope.row.acceptanceOnArrivalStorage}}</el-tag>
                    </el-table-column>
                    <el-table-column prop="acceptanceOnArrivalInboundTime" label="入库时间" width="150px;"/>
                    <el-table-column prop="nickname1" label="入库员" width="110px;"/>
                    <el-table-column #default="scope" label="操作" width="120px;" fixed="right">
                        <el-button type="primary" @click="toUpdate(scope.row)" :row="scope.row">修改</el-button>
                    </el-table-column>
                </el-table>

                <el-dialog
                    :title="title"
                    v-model="isVisible"
                    :destroy-on-close="true"
                    width="60%">
                    <router-view @ref-table="refTanle" :data="data">
                    </router-view>
                </el-dialog>
            </template>
            
        </el-card>
       
    </div>
</template>

<style scoped>
.sousuo{
    width:200px;
    /* margin-right: 100px; */
}
.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.c_item{
    flex:1;
    margin:0px 5px 15px 0;
    width: calc((100%-10px)/3); 
    min-width:calc((100% - 10px)/3);
    max-width:calc((100% - 10px)/3);
    &:nth-child(3n){
        margin-right:0;
    }
}
[m='4'] :deep(.el-table){
    --el-table-border-color: transparent;
}
:deep(.el-tooltip):hover{
    cursor: pointer;
}
</style>